<template>
	<view>
		<myMask ref="updataMask" top="0" :isflexcenter="true" :hindex="true" noclickhide="true"
			@onHideHander="onHideUpdateMask()" @onShowHander="onShowUpdateMask()">
			<div class="model_box container_flex column center" :class="{'active': showActive}"
				:style="{ height: aheight +'upx', width: awidth +'upx' }">
				<!-- <slot></slot> -->
				<div class="active_box">
					<div class="active_box_icon" @click.stop="cancelQuit()"><i class='iconfont icon-qingchu'></i></div>
					<!-- <image src="@/static/assets/public/update.jpg" class="update_box_img"></image> -->
					<div class="update_box_text1">版本更新提示</div>
					<div class="update_box_text2 text_info">当前版本低{{version}},请更新体验吧~</div>
					<div class="button-box container_flex row" v-if="updateProgress">
						<button class="noborder confirm_btn" hover-class="primary-hover" type="primary"
							@click.stop="confirmUpdate()">更新</button>
					</div>
					<div class="update_box_progress" v-else>
						<!-- <u-line-progress active-color="#55aaff" :percentage="percentage"></u-line-progress> -->
						<progress :percent="percentage" show-info stroke-width="3" />
					</div>
				</div>
			</div>
		</myMask>
	</view>
</template>
<script>
	import myMask from './mask.vue'
	import {
		updateVersion
	} from '@/api/updateVersion.js'
	import baseUrl from '@/utils/getIp.js'

	export default {
		// 自定义弹框宽高
		props: ['aheight', 'awidth'],
		data() {
			return {
				showActive: false, // 弹框动画
				updateUrl: '', // 整包安装包
				wgtUrl: '', // wgt更新包
				percentage: '',
				version: uni.getStorageSync('version').version,
				updateProgress: true,
			}
		},
		components: {
			myMask
		},
		methods: {
			updateVersion() {
				updateVersion({
					appType: 1,
					oldVersion: uni.getStorageSync('version').version,
				}).then((res) => {
					console.log(res)
					if (res.flag == 0) {
						this.$refs.updataMask.showMask()
						if (res.srcType == "apk") {
							this.updateUrl = baseUrl + '/files/' + res.filePath
						} else {
							this.wgtUrl = baseUrl + '/files/' + res.filePath
						}
					} else if (getCurrentPages()[getCurrentPages().length - 1].$page.fullPath ==
						'/pages/My/set/index') {
						uni.showToast({
							title: '当前版本最新：' + uni.getStorageSync('version').version,
							icon: "none",
							duration: 3000
						})
					}
				})
			},
			onHideUpdateMask() {
				this.showActive = false
			},
			onShowUpdateMask() {
				let _this = this
				setTimeout(() => {
					_this.showActive = true
				}, 200)
			},
			confirmUpdate() {
				let _this = this
				this.updateProgress = false
				// 优先更新wgt包
				if (this.wgtUrl) {
					this.hotUpdateFun()
				} else if (this.updateUrl) {
					plus.runtime.openURL(this.updateUrl);
					if (plus.os.name.toLowerCase() === 'android') {
						plus.runtime.quit();
					} else {
						const threadClass = plus.ios.importClass("NSThread");
						const mainThread = plus.ios.invoke(threadClass, "mainThread");
						plus.ios.invoke(mainThread, "exit");
					}
				} else {
					plus.nativeUI.toast('无安装包可用，请联系管理员')
				}
			},
			cancelQuit() {
				this.$refs.updataMask.hideMask()
				this.$emit('cancelQuit')
			},
			hotUpdateFun() {
				let _this = this
				// 创建下载任务
				const downloadTask = uni.downloadFile({
					url: _this.wgtUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							plus.runtime.install(res.tempFilePath, {
								force: true
							}, function(succ) {
								plus.nativeUI.closeWaiting();
								plus.nativeUI.alert('更新完成！', function() {
									// 热更新完成自动重启
									plus.runtime.restart();
								});
							}, function(e) {
								plus.nativeUI.closeWaiting();
								plus.nativeUI.alert('更新失败,点击确认手动更新', function() {
									plus.runtime.openURL(_this.updateUrl);
									plus.runtime.quit();
								});
							});
						}
					}
				});
				downloadTask.onProgressUpdate((res) => {
					this.percentage = res.progress
				});
			},
		},
		onload() {

		}
	}
</script>
<style scoped lang="scss">
	$primarycolor: rgb(21, 125, 251);
	$primaryHoverColor: lighten($primarycolor, 10%);
	$whiteColor: white;

	.container_flex.center {
		align-items: center;
		justify-content: center;
		-webkit-align-items: center;
		-webkit-justify-content: center;
	}

	.container_flex {
		display: flex;
		display: -webkit-flex;
	}

	// 布局end
	button[type="primary"] {
		background-color: $primarycolor;
		border-color: $primarycolor;
		color: $whiteColor;
	}

	button[type="primary"][plain] {
		background-color: transparent;
		color: $primarycolor;
	}

	button.noborder::after {
		border: 0 !important;
		outline: 0 !important;
	}

	.primary-hover {
		background-color: $primaryHoverColor !important;
		border-color: $primaryHoverColor !important;
	}

	.model_box {
		position: absolute;
		width: 75%;
		height: 650upx;
		// max-height: 500upx;
		opacity: 0.5;
		transform: scale(0.5);
		border-radius: 15upx;
		transition: all 0.3s;
		background-color: #fff;
	}

	.active {
		transform: scale(1);
		opacity: 1;
	}

	// activeModel
	.active_box {
		width: 100%;
		height: 100%;
		text-align: center;
		padding: 20upx;
		box-sizing: border-box;
		word-wrap: break-word;
		word-break: normal;
	}

	.active_box_icon {
		text-align: right;
	}

	.iconfont {
		color: #9a9a9a;
	}

	.update_box_img {
		width: 450upx;
		height: 300upx;
	}

	.update_box_text1 {
		font-size: 38upx;
		color: rgb(71, 79, 102);
		font-weight: 600;
		text-align: center;
	}

	.update_box_text2 {
		font-size: 32upx;
		color: rgb(122, 130, 153);
		margin-top: 20upx;
	}

	.button-box {
		position: absolute;
		justify-content: space-around;
		-webkit-justify-content: space-around;
		bottom: 20upx;
		width: 100%;
		height: 100upx;
		align-items: center;
		-webkit-align-items: center;
		left: 0;
	}

	.confirm_btn {
		flex: 1;
		height: 84upx;
		border-radius: 40upx;
		font-size: 34upx;
		line-height: 84upx;
		margin: 0 30upx;
	}

	.confirm_btn {
		color: #fff;
	}

	.update_box_progress {
		padding: 20upx;
		margin-top: 30upx;
	}

	// activeModel end
</style>